<template>
  <div>
    <el-select v-model="value1" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.name"
        :value="item.value"
      ></el-option>
    </el-select>
    <div style="width: 100%; margin-bottom: 20px" v-if="this.value1 == 1">
      <component
        v-for="(item, index) in sortLeft"
        :key="index + 1"
        :is="item"
        class="right-content"
      />
    </div>
    <div style="width: 100%; margin-bottom: 20px" v-if="this.value1 == 2">
      <component
        v-for="(item, index) in sortRight"
        :key="index"
        :is="item"
        class="right-content"
      />
    </div>

    <div class="tab" style="width: 100%">
      <div>
        <div
          v-empty="!crm.leads.index"
          xs-empty-icon="nopermission"
          xs-empty-text="暂无权限"
          class="crm-container"
        >
          <!-- 场景+高级筛选 -->
          <c-r-m-table-head
            ref="crmTableHead"
            :crm-type="crmType"
            :sort-data="sortData"
            @filter="handleFilter"
            @handle="handleHandle"
            @scene="handleScene"
          />
          <el-table
            v-loading="loading"
            id="crm-table"
            :row-height="40"
            :data="list"
            :height="tableHeight"
            :cell-class-name="cellClassName"
            :row-key="`${crmType}Id`"
            class="n-table--border"
            use-virtual
            stripe
            border
            highlight-current-row
            style="width: 100%"
            @sort-change="sortChange"
            @header-dragend="handleHeaderDragend"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              show-overflow-tooltip
              reserve-selection
              type="selection"
              align="center"
              width="55"
            />
            <el-table-column
              v-for="(item, index) in fieldList"
              :key="index"
              :fixed="index == 0"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :formatter="fieldFormatter"
              sortable="custom"
              show-overflow-tooltip
            />
            <el-table-column />
            <!-- <el-table-column label="关注" align="center" fixed="right" width="60">
          <template slot-scope="scope">
            <el-tooltip
              :content="scope.row.star == 0 ? '添加关注' : '取消关注'"
              effect="dark"
              placement="top"
            >
              <i
                :class="{ active: scope.row.star != 0 }"
                class="wk wk-focus-on focus-icon"
                @click="toggleStar(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column> -->
            <!-- <el-table-column :resizable="false" fixed="right" width="40">
          <template slot="header" slot-scope="slot">
            <field-set :crm-type="crmType" @change="setSave" />
          </template>
        </el-table-column> -->

            <!-- <wk-empty
              slot="empty"
              :props="{
                buttonTitle: '新建线索',

                showButton: saveAuth,
              }"
              @click="createClick"
            /> -->
          </el-table>

          <div class="p-contianer">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="pageSizes"
              :page-size.sync="pageSize"
              :total="total"
              :pager-count="5"
              class="p-bar"
              background
              layout="prev, pager, next, sizes, total, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>

        <leads-detail
          v-if="showDview"
          :id="rowID"
          class="d-view"
          @handle="handleHandle"
          @hide-view="showDview = false"
        />

        <!-- 新建 -->

        <leads-create
          v-if="createShow"
          @close="createShow = false"
          @save-success="handleHandle"
        />
      </div>
    </div>
  </div>
</template>
<script>
import volume from "./components/volume";
import FitText from "@/directives/fitText";
import volumeYear from "./components/volumeYear";
import TableMixin from "../../crm/mixins/Table";
export default {
  name: "index5",
  directives: {
    FitText,
  },
  mixins: [TableMixin],
  components: {
    volume,
    volumeYear,
  },
  data() {
    return {
      crmType: "leads",
      createShow: false,
      loading: false,
      // 排序
      sortLeft: ["volume"],
      sortRight: ["volumeYear"],
      setSortShow: false,
      value1: 1,
      options: [
        { name: "期数", value: 1 },
        { name: "年份", value: 2 },
      ],
    };
  },
  deactivated: function () {
    if (this.$refs.elMenu) {
      this.$refs.elMenu.activeIndex = this.crmType;
    }
  },
  methods: {
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (
        column.property === "leadsName" ||
        column.property === "customerName"
      ) {
        return "can-visit--underline";
      } else {
        return "";
      }
    },
  },
};
</script>